<template>
  <div class="db-nav flex-v">
    <div class="glb">
      <div class="auto-flex cy">
        <strong class="f16">
          <i class="glyphicon glyphicon-send"></i>
          <span>连接管理</span>
        </strong>
      </div>
      <div>
        <button type="button" class="btn btn-sm btn-success"
          v-if="$root.is.local"
          @click="$root.openFile($options.__file)"
        >打开组件</button>
        <a-tooltip title="连接数据库" placement="bottom">
          <button type="button" class="btn btn-sm btn-primary">
            <i class="glyphicon glyphicon-resize-small"></i>
          </button>
        </a-tooltip>
        <a-tooltip title="帮助" placement="bottom">
          <button type="button" class="btn btn-sm btn-warning">
            <i class="glyphicon glyphicon-question-sign"></i>
          </button>
        </a-tooltip>
      </div>
    </div>
    <div class="auto-flex nav-db-table">
      <div class="flex-v">
        <div class="glb">
          <div class="auto-flex">
            <i class="glyphicon glyphicon-hdd"></i>
            <strong>数据库</strong>
          </div>
          <div>
            <i class="glyphicon glyphicon-export"></i>
            <i class="glyphicon glyphicon-import"></i>
            <i class="glyphicon glyphicon-plus"></i>
          </div>
        </div>
        <div class="auto-flex">
          <div v-if="!db.list.length" class="space c">
            <SmartLoading v-if="db.isLoading"></SmartLoading>
            <div v-else class="no-data">暂无数据</div>
          </div>
          <ul>
            <li
              v-for="(v, idx) in db.list"
              :key="idx"
              :class="{on: v === curDB}"
              @click="cmd('click-db', v)"
              @contextmenu="$root.copy(v)"
              :title="v"
            ><div class="ellipsis">{{ v }}</div></li>
          </ul>
        </div>
        <div>
          <div class="glb p">
            <div class="auto-flex">
              <i class="glyphicon glyphicon-play"></i>
              <span>执行SQL (alt + r)</span>
            </div>
          </div>
          <div class="glb p" style="border-bottom: none;">
            <div class="auto-flex">
              <i class="bi-github"></i>
              <span>GitHub</span>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-v">
        <div class="glb">
          <div class="auto-flex">
            <i class="bi-table"></i>
            <strong>数据表</strong>
          </div>
          <div>
            <i class="glyphicon glyphicon-export"></i>
            <i class="glyphicon glyphicon-import"></i>
            <i class="glyphicon glyphicon-plus"></i>
          </div>
        </div>
        <div class="auto-flex">
          <div v-if="!table.list.length" class="space c">
            <SmartLoading v-if="table.isLoading"></SmartLoading>
            <div v-else class="no-data">暂无数据</div>
          </div>
          <ul>
            <li
              v-for="(v, idx) in table.list"
              :key="idx"
              :class="{on: v === curTable}"
              @click="cmd('click-table', v)"
              @contextmenu="$root.copy(v)"
              :title="v"
            ><div class="ellipsis">{{ v }}</div></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="glb">
      <div class="auto-flex">
        <span class="icon-mr">技术支持</span>
        <strong>
          <a href="http://codding.cn" target="_blank" class="text-primary">http://codding.cn</a>
        </strong> 
      </div>
      <div>
        <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=XRAaQM9Dh4NcpPlm3ILx1TI88S_pssb5&amp;jump_from=webapi">
          <img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="KatusAdmin | 官方群" title="KatusAdmin | 官方群"></a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index-main',
  data() {
    return {}
  },
  computed: {
    r() {
      return this.$root.router
    },
    db() {
      return this.$parent.db
    },
    table() {
      return this.$parent.table
    },
    curDB() {
      return this.$parent.curDB
    },
    curTable() {
      return this.$parent.curTable
    },
  },
  watch: {},
  methods: {
    async cmd(a, arg) {
      const vm = this.$root
      const r = this.r

      switch (a) {
        case 'click-db':
          r.curDB !== arg && vm.setRouter({
            com: r.com,
            curDB: arg,
            curTab: r.curTab,
          })
          await this.$parent.lsTable()
          break
        case 'click-table':
          r.curTable !== arg && vm.setRouter({
            com: r.com,
            curDB: r.curDB,
            curTab: r.curTab,
            curTable: arg,
          })
          await this.$parent.lsData()
          break
      }
    },
    async setScrollTop() {
      await this.$nextTick()
      document.querySelectorAll('.nav-db-table .on').forEach((li) => {
        const el = li.closest('.auto-flex')
        if (
          li.offsetTop > el.scrollTop + el.offsetHeight ||
          li.offsetTop + li.offsetHeight < el.scrollTop
        ) {
          el.scrollTop = li.offsetTop - 100
        }
      })
    }
  },
  async mounted() {}
}
</script>

<style lang="less" scoped>
.db-nav {
  border-right: 1px solid #ddd; background: var(--bgColor);
  white-space: nowrap; user-select: none;
  & > .nav-db-table {
    display: flex;
    & > div {
      max-width: 260px;
      &:not(:first-child) {
        border-left: 1px solid #fff;
      }
      &:not(:last-child) {
        border-right: 1px solid #ddd;
      }
      & > .auto-flex {
        border-top: 1px solid #fff;
        ul {
          li {
            cursor: pointer; padding: .5em 1em;
            &.on {background: rgba(0, 0, 0, .1);}
          }
        }
      }
    }
  }
}
</style>